<template>
  <div class="error404">
    <h3>404</h3>
  </div>
</template>

<script lang="ts" setup name="Error404">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {})
onBeforeUnmount(() => {})
</script>

<style lang="scss" scoped>
.error404 {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--bgWhite);
  h3 {
    text-align: center;
    font-size: 100px;
    color: var(--fontColor);
    text-shadow:
      3px 3px 0 #aaa,
      /* Basic shadow */ 6px 6px 0 #bbb,
      /* Additional layers for depth */ 9px 9px 0 #ccc;
  }
}
</style>
